<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
/*
  background is a constituent property
  This property is a shorthand for the following CSS properties
  + background-attachment
  + background-clip
  + background-color
  + background-image
  + background-origin
  + background-position  https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  + background-repeat
  + background-size
*/

    #example {
      /* Using a <background-color> */
      background: green;

      /* Using a <bg-image> and <repeat-style> */
      background: url(../images/1.jpg) repeat-y;

      /* Using a <box> and <background-color> */
      background: border-box red;

      /* A single image, centered and scaled */
      background: no-repeat center/80% url(../images/1.jpg);
    }
/*
The background property is specified as one or more background layers, separated by commas.
background属性指定为一个或多个背景层，用逗号分隔。

The syntax of each layer is as follows:
Each layer may include zero or one occurrences of any of the following values:
+ <attachment><attachment>
+ <bg-image>
+ <position>
+ <bg-size>
+ <repeat-style>

The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".

The <box> value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip. If it is included twice, the first occurrence sets background-origin, and the second sets background-clip.

The <background-color> value may only be included in the last layer specified.
*/
  </style>
</head>
<body>
<div id="example"></div>
</body>
</html>
